<template>
	<div>
		<div v-if='!yrz' class="set">
			<section style="width: 5.3rem;">
				<div><label>姓名</label><input type="text" v-model="name" v-on:input="check" class="input" placeholder="请输入姓名"></div>
				<div class="m_top"><label>身份证号</label><input type="text" v-model="idno" v-on:input="check" class="input"
					 placeholder="请输入身份证号"></div>
				<div style="margin-top: 0.2rem;">
					<p class="tips">注意:您的姓名以及身份证号会经过加密保存,</p>
					<p class="tips">保证您的信息隐私安全&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
				</div>
				<div class="send" :class="{'active': isActive}" @click='submit'>提交</div>
			</section>
		</div>
		<div class="information" v-else>
			<div class="name" style="text-align: left;">身份证号码: &nbsp;&nbsp;<span style="display: inline-block;">{{user_idno}}</span></div>
			<div class="idt" style="margin-top: 0.4rem; text-align: left;">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:
				<span style="display: inline-block; ">&nbsp;&nbsp;{{user_name}}</span></div>
		</div>
		<div class="loading mask" :class="{'show_loading':isAjax}">
			<div class="load_container">
				<p>正在发送中...</p>
			</div>
		</div>
		<div class="tanbox_container" :class="{'show_loading': showTanbox}">
			<div class="pop">
			</div>
			<div class="tanbox">
				<div class="name"><span style="display: inline-block;width: 34%;">身份证号码: </span><span>{{idno}}</span></div>
				<div class="idt" style="margin-top: 0.2rem;"><span style="display: inline-block;width: 34%;"><span class="fl">姓</span><span
						 class="fr">名: </span></span><span style="display: inline-block;vertical-align: super"> &nbsp;{{name}}</span></div>
				<p class="tips ">注意：实名信息认证后无法修改</p>
				<div class="btns">
					<span class="fl" style="color: #F06A4F;" @click='rz'>确认提交</span>
					<span class="fr" @click="clean">重新填写</span>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
    import "../css/realname.scss"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				isAjax: false,
				name: '',
				idno: '',
				isActive: false,
				showTanbox: false
			}
		},
		computed: {
			...mapState(['yrz', 'user_name', 'user_idno']),
		},
		methods: {
			...mapMutations(['UPDATERZ', 'UPDATERZINFOR','UPDATERZTITLE']),
			check() {
				var name_l = this.name.trim().length;
				var idno_l = this.idno.trim().length;
				if (name_l > 0 && (idno_l == 15 || idno_l == 18)) {
					this.isActive = true;
				} else {
					this.isActive = false;
				}
			},
			clean() {
				this.showTanbox = false;
			},
			submit() {
				this.name = this.name.trim();
				this.idno = this.idno.trim();
				var name_l = this.name.length;
				var idno_l = this.idno.length;
				// 防止请求还没请求完就连续点击
				if (this.isAjax) {
					return
				}
				var that = this
				if (name_l == 0) {
					toast('请输入姓名')
					return
				}
				if (idno_l == 0 || (idno_l != 15 && idno_l != 18)) {
					toast('身份证号码不对')
					return
				}
				this.showTanbox = true;
			},
			rz() {
				var d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&cname=" + this.name +
					"&idno=" + this.idno;
				var that = this;
				this.axios.interceptors.request.use(function (config) {
                    that.isAjax = true;
                    that.showTanbox = false;
					return config;
				}, function (error) {
					return Promise.reject(error)
				});
				this.axios.interceptors.response.use(function (res) {
					that.isAjax = false;
					that.isActive = false;
					return res;
				}, function (error) {
					that.isAjax = false;
					return Promise.reject(error);
				});
				this.axios.post(userInfo.hosturl + '/IOSApi/ajax_identify', d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data;
					if (data.result == 0) {
						toast('操作成功');
						//认证后
						that.UPDATERZ(true);
						that.UPDATERZTITLE()
						that.UPDATERZINFOR({
							name: data.data.cname,
							id: data.data.idcardno
						})
						that.name = '';
						that.idno = '';
						that.$router.go(-1);
					} else if (data.result == 1037) {
						loginout(1)
					} else {
						toast(data.error);
					}
				})
			}
		},
		mounted() {},
		activated() {
		}
	}

</script>
<style lang='scss' scoped>

</style>
